<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_srt7hkm0rqh.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>图文咨询</title>
    <style>
        .info{
            width: 100%;
            height: auto;
            padding: 0 .28rem;
        }
        .title{
            padding: .2rem 0;
            font-size: 0.32rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
        }
        .info-txt{
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
            line-height: 0.42rem;
        }
        .select-box{
            width: 6.94rem;
            height: 0.78rem;
            background: #F5F6F7;
            border-radius: 0.05rem;
            padding:0 .19rem;
        }
        .select-box .default{
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #CCCCCC;
        }
        .select-box .iconfont{
            font-size: .48rem;
            color: #BFBFBF;
        }
        .select-box div{
            color: #222;
        }
        .cat-item{
            width: 6.94rem;
            height: 0.78rem;
            border: 0.01rem solid #CCCCCC;
            border-radius: 0.05rem;
            padding: 0 .3rem;
            margin-bottom: .2rem;
        }
        .cat-item .time{
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
        }
        .cat-item .cat{
            padding: 0 .1rem;
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
        }
        .cat-item .price{
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF5410;
        }
        .cat-item.active{
            background-color: #4B9AFE;
        }
        .cat-item.active .time{
            color: #fff;
        }
        .cat-item.active .cat{
            color: #fff;
        }
        .cat-item.active .price{
            color: #fff;
        }
        .tips-box{
            width: 100%;
            height: auto;
            padding: .3rem .28rem;
            background-color: #F7F7F7;
        }
        .tips-box .title img{
            width: .28rem;
            height: auto;
            margin: 0;
            margin-right: .05rem;
        }
        .tips-box .title span{
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
        }
        .tips-content{
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #5D5D5D;
            line-height: 0.38rem;
        }
        .footer{
            width: 100%;
            height: 1.1rem;
            background-color: #fff;
            padding: 0 .28rem;
        }
        .footer .left .left-txt{
            font-size: 0.32rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
            margin-right: .15rem;
        }
        .footer .left .price{
            font-size: 0.32rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FF5410;
        }
        .footer .right{
            width: 3.25rem;
            height: 0.9rem;
            background: #4B9AFE;
            border-radius: 0.45rem;
            font-size: 0.36rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="header flex align-items space-between">
            <div class="back fn-ctr">
                <i class="iconfont iconjiantouzuo"></i>
            </div>
            <div class="middle fn-ctr">图文咨询</div>
            <div class="right"></div>
        </div>
        <div class="main">
            <div class="banner">
                <img src="../../images/createorder.png" alt="">
            </div>
            <div class="info">
                <div class="title">项目介绍</div>
                <div class="info-txt">律师通过"语音通话"功能向客服提供语音咨询服务。专业律师，专业解答，亲民的价格，出售即可。</div>
                <div class="title">服务类型</div>
                <div class="select-box flex align-items space-between">
                    <div class="default">请选择类型</div>
                    <i class="iconfont iconf11"></i>
                </div>
                <div class="title">服务类别</div>
                <div class="cat-item flex align-items space-between">
                    <div class="time">14分钟</div>
                    <div class="cat flex1">简单咨询</div>
                    <div class="price">¥30</div>
                </div>
                <div class="cat-item active flex align-items space-between">
                    <div class="time">14分钟</div>
                    <div class="cat flex1">简单咨询</div>
                    <div class="price">¥30</div>
                </div>
            </div>
            <div class="tips-box">
                <div class="title flex align-items flex-start">
                    <img src="../../images/tips.png">
                    <span>服务提醒</span>
                </div>
                <div class="tips-content">下单后请您确保APP处于登录状态,以便律师与您连线沟通,如果您未能及时接听,服务律师将呼叫您在平台绑定的手机号,请您有意接听,如您对特定律师下单,建议您提前与律师沟通,避免出现该律师繁忙未能及时接单。</div>
            </div>
        </div>
        <div class="footer flex align-items space-between">
            <div class="left">
                <span class="left-txt">订单价格</span>
                <span class="price">¥50</span>
            </div>
            <div class="right fn-ctr">立即购买</div>
        </div>
    </div>
    <script src="../../js/vue.js"></script>
    <script src='../../js/ice_fox.js'></script>
    <script src="../../js/common.js"></script>
    <script>
        api_init = function(){
            var root = new Vue({
                el:"#root",
                data:{},
                methods:{},
                mounted:function(){},
                created:function(){},
            })
        }
    </script>
</body>
</html>